<template>
  <div class="test">
    <!--    也可以考虑用多列、弹性布局-->
    <el-form ref="form" :model="form" label-width="90px">
      <el-row>
        <!-- 输入框 -->
        <el-col :span="6">
          <el-form-item label="输入框">
            <el-input placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <!-- 下拉 -->
        <el-col :span="6">
          <el-form-item label="下拉">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 输入框 -->
        <el-col :span="6">
          <el-form-item label="输入框">
            <el-input placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <!-- 下拉 -->
        <el-col :span="6">
          <el-form-item label="下拉">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 级联 -->
        <el-col :span="6">
          <el-form-item label="级联">
            <el-cascader
                v-model="value1"
                :options="options"></el-cascader>
          </el-form-item>
        </el-col>
        <!-- 日期选择器 -->
        <el-col :span="6">
          <el-form-item label="日期选择器">
            <el-date-picker
                v-model="value"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'test',
  data() {
    return {
      form: {},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: []
    }
  }
}
</script>
<style scoped >
.test {
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-input, .el-select, .el-cascader {
    width: 100% !important;
  }
}
</style>
